<template>
  <div>
    <div v-if="pageBool" class="padding_10">
      <div class="grid_4_column">
        <!-- 用户姓名 -->
        <div class="flex_y_center">
          用户姓名：
          <el-input
            v-model="searchForm.username"
            clearable
            maxlength="50"
            placeholder="请输入用户姓名"
            style="width: 200px"
          />
        </div>
        <!-- 昵称 -->
        <div class="flex_y_center">
          昵称：
          <el-input
            v-model="searchForm.name"
            clearable
            maxlength="50"
            placeholder="请输入昵称"
            style="width: 200px"
          />
        </div>
      </div>
      <!-- 筛选，重置按钮 -->
      <div style="margin: 10px 0">
        <el-button
          icon="el-icon-search"
          :loading="filterLoading"
          type="primary"
          @click="get('filterLoading')"
        >
          筛选
        </el-button>
        <el-button
          icon="el-icon-refresh"
          :loading="resetLoading"
          @click="reset"
        >
          重置
        </el-button>
      </div>

      <el-table :data="tableData" :empty-text="emptyText">
        <el-table-column label="用户" prop="member_name" />
        <el-table-column label="医生" prop="user_name" />
        <el-table-column label="预约日期" prop="created_at" />
        <el-table-column label="检查项目" prop="goods_name" />
        <el-table-column label="状态" prop="status_name" />

        <el-table-column label="检查/检查人">
          <template slot-scope="scope">
            <el-popconfirm
              v-permissions="{ permission: ['check:CheckService'] }"
              :title="'确认 ' + scope.row.goods_name + ' 已检查吗？'"
              @confirm="check(scope.row)"
            >
              <el-button type="primary" slot="reference">检查</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              v-permissions="{ permission: ['view:CheckService'] }"
              type="primary"
              @click="details(scope.row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Inspec-details v-else :o-sel-info="selInfo" @send="sendMain" />
  </div>
</template>

<script>
  import InspecDetails from './components/inspecdetails'
  import { getReportList, setReportStatus } from '@/api/report'

  export default {
    components: {
      InspecDetails,
    },
    data() {
      return {
        pageBool: true,
        filterLoading: false,
        resetLoading: false,
        searchForm: {
          username: '',
          name: '',
        },
        emptyText: ' ',
        tableData: [],
        selInfo: {},
      }
    },
    mounted() {
      this.get()
    },
    methods: {
      // 获取检验列表
      get(btnLoad) {
        this[btnLoad] = true
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        getReportList(this.searchForm).then((e) => {
          this.tableData = e.data
          this[btnLoad] = true
          loading.close()
          if (this.tableData.length == 0) this.emptyText = '暂无数据'
        })
      },
      // 重置
      reset() {
        for (let item in this.searchForm) this.searchForm[item] = ''
        this.get('resetLoading')
      },
      // 检查
      check(row) {
        const data = {
          id: row.id,
          attribute_id: row.attribute_id,
          member_id: row.member_id,
        }
        setReportStatus(data).then(() => {
          this.get()
        })
      },
      // 详情
      details(row) {
        this.selInfo = row
        this.pageBool = false
      },
      sendMain() {
        this.pageBool = true
        this.$nextTick(() => {
          this.get()
        })
      },
    },
  }
</script>

<style scoped>
  .grid_4_column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
</style>
